<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe
      v-if="data"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item 
      v-for="p in data.data" 
      :key="p.lid"
      @click.native="$router.push(`/lbt?lbt=${p.lbt}`)">
        <img :src="`/img/icons/轮播图/${p.picture}`" />
      </van-swipe-item>
    </van-swipe>
    <!-- 时令热搜 -->
    <p>时令热搜</p>
    <van-button
      type="default"
      class="van-button"
      v-for="bto in button"
      :key="bto.sid"
      @click.native="$router.push(`/zozi?type=${bto.reso}`)"
      >{{ bto.reso }}</van-button
    >
    <!-- 本周最热 -->
    <p>本周最热</p>
    <div class="bzzr">
      <div class="bzzr-1"
       v-for="bzzr in bzzr" 
       :key="bzzr.bid"
       @click="$router.push(`/bzzr?cuisine=${bzzr.cuisine}`)">
        <img :src="`/img/icons/本周最热/${bzzr.cuisine}/${bzzr.small_picture}`" />
        <p>{{bzzr.cuisine}}</p>
      </div>
    </div>
    <br />
    <!-- 本月最热 -->
    <p>本月最热</p>
    <div class="bzzr">
      <div class="bzzr-1"
       v-for="byzr in byzr" 
       :key="byzr.bid"
        @click="$router.push(`/byzr?cuisine=${byzr.cuisine}`)">
        <img :src="`/img/icons/本月最热/${byzr.cuisine}/${byzr.small_picture}`" />
        <p>{{byzr.cuisine}}</p>
      </div>
    </div>
    <br />
  </div>
</template>
<style scoped>
.van-swipe img {
  width: 56.2vw;
  width: 100%;
}
.van-button {
  padding: 14px;
  margin: 4px;
  font-weight: bold;
}
p {
  margin-left: 8px;
  color: #666;
}
.bzzr {
    display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-left: 8px;
  margin-right: 8px;
}
.bzzr-1 {
  border: 1px solid #e8e8e8;
  width: 115px;
}
.bzzr img {
  width: 115px;
  height: 80px;
}
.bzzr-1 p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
*{
  margin: 0;
  padding: 0;
}
</style>
<script>
import NavigationBar from "@/components/NavigationBar.vue";
import Bottom from "@/components/Bottom.vue";
export default {
  components: { NavigationBar, Bottom },
  data() {
    return {
      data: '1',
      button:[],
      bzzr:[],
      byzr:[],
      kw:'',
    }
  },
  mounted(){
   this.getData(); 
   this.getButton();
   this.getBzzr();
   this.getByzr();
  },
  //发送请求
  methods: {
    	
    getData() {
      const url = "http://127.0.0.1:3000/v1/slideshows/slideshow";
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
    getButton(){
      const url='http://127.0.0.1:3000/v1/topsearchs/topsearch';
      this.axios.get(url).then((res)=>{
        console.log(res);
        this.button=res.data.button;
      })
    },
    getBzzr(){
      const url='http://127.0.0.1:3000/v1/this_weeks/this_week';
      this.axios.get(url).then((res)=>{
        console.log(res);
        this.bzzr=res.data.bzzr;
    })
  },
  getByzr(){
    const url='http://127.0.0.1:3000/v1/this_months/this_month';
    this.axios.get(url).then((res)=>{
      console.log(res);
      this.byzr=res.data.byzr;
    })
  },
  },
};
</script>